<template>

    <div class="container">
        <div class="swiper-container">
            <t-swiper class="tdesign-demo-block--swiper" :navigation="{ placement: 'outside' }">
                <t-swiper-item v-for="item in 26" :key="item">
                    <div class="demo-item" style="height: 150px; background: #f5f5f5">{{ item }}</div>
                </t-swiper-item>
            </t-swiper>
        </div>
        <t-typography-paragraph ellipsis>{{ content }}</t-typography-paragraph>
        <t-typography-paragraph :ellipsis="ellipsisState1">{{ content }}</t-typography-paragraph>
        <t-typography-paragraph :ellipsis="ellipsisState2" style="width: 200px">{{ content }}</t-typography-paragraph>
        <t-typography-paragraph :ellipsis="ellipsisState3" @onExpand="handleExpand">{{ content
        }}</t-typography-paragraph>

        <div style="max-width: 500px; padding: 20px">
            <EllipsisText :rows="2">
                TDesign was founded with the principles of open-source collaboration from the beginning. The
                collaboration scheme discussion, component design, and API design, including source code, are fully open
                within the company, garnering widespread attention from internal developers and designers. TDesign
                follows an equal, open, and strict policy, regardless of the participants' roles.

                <template #expand="{ expanded, toggle }">
                    <span style="color: #0052d9; cursor: pointer; font-size: 14px" @click="toggle">
                        {{ expanded ? '收起' : '查看更多' }}
                    </span>
                    <t-icon name="chevron-down" style="font-size: 14px; margin-left: 5px"></t-icon>
                    <t-icon name="chevron-up" style="font-size: 14px; margin-left: 5px"></t-icon>
                </template>
            </EllipsisText>
        </div>
    </div>
</template>

<script setup lang="ts">
import { h, ref } from 'vue';
import { ChevronDownIcon } from 'tdesign-icons-vue-next';
import EllipsisText from '@/components/EllipsisText.vue';
const content = `TDesign was founded with the principles of open-source collaboration from the beginning. The collaboration scheme discussion, component design, and API design, including source code, are fully open within the company, garnering widespread attention from internal developers and designers. TDesign follows an equal, open, and strict policy, regardless of the participants' roles.`;

const ellipsisState1 = ref({
    row: 2,
    expandable: true,
    collapsible: true,
})

const ellipsisState2 = ref({
    row: 1,
    tooltipProps: {
        content: 'long long long text',
        showArrow: true,
    },
})

// 确保 expandable 和 collapsible 设置为 true 来允许折叠和展开
const ellipsisState3 = ref({
    row: 1,
    suffix: h(ChevronDownIcon),
    expandable: true,
    collapsible: true,
    expandText: '查看更多',   // 自定义展开文字
    collapseText: '收起内容', // 自定义收起文字
});

const handleExpand = (expanded: boolean) => {
    console.log('段落是否展开:', expanded);
};
</script>

<style scoped>
.container {
    width: 75%;
    margin: 0 auto;
    display: block;
}
</style>